<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/leader/notices'}">学院领导</el-breadcrumb-item>
      <el-breadcrumb-item>审核请求处理</el-breadcrumb-item>
      <el-breadcrumb-item>学生成绩审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!--表格区域-->
      <el-table :data="checkScoreList" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="学生">
          <template slot-scope="scope">
            <el-tag>{{scope.row.stu.name}} ({{scope.row.stu.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导老师" >
          <template slot-scope="scope">
            <el-tag>{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导成绩" prop="score.guideScore"></el-table-column>
        <el-table-column align="center" label="互评成绩" prop="score.commentScore"></el-table-column>
        <el-table-column align="center" label="答辩成绩" prop="score.replyScore"></el-table-column> 
        <el-table-column align="center" label="教师评语">
          <template slot-scope="scope">
            <el-popover placement="top" width="300" trigger="click" :content="scope.row.score.teacherAdvice">
              <el-button slot="reference" circle icon="el-icon-view"></el-button>
            </el-popover> 
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核">
          <template slot-scope="scope">
            <el-button type="warning" circle icon="el-icon-circle-check" @click="showCheckDialog(scope.row.score)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
      <!-- 底部分页按钮 -->
    <el-pagination
      background style="margin-left:42%"
      :current-page.sync="pageParam.currentPage" 
      :page-size.sync="pageParam.pageSize"
      @current-change="nowPage"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
    
    <!-- 审核课题申报对话框 -->
    <el-dialog title="审核学生成绩" :visible.sync="dialogVisible" width="600px">
      <el-form ref="checkFormRef" :rules="formRules" label-width="120px" :model="checkParams">
        <el-form-item label="审核结果" prop="status">
          <el-select v-model="checkParams.status" placeholder="请选择审核结果"> 
            <el-option :value="3" label="审核不通过"></el-option>
            <el-option :value="4" label="审核通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="checkAdvice">
          <el-input v-model="checkParams.checkAdvice" type="textarea" :rows="5" style="width: 50%"></el-input>
          <el-button type="primary" round style="margin-left: 15%;" @click="submitCheckScore('checkFormRef')">提交审核</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> 
  </div>
</template>

<script> 
  import {getLeaderCheckScoreListByPage, checkScoreById, getLeaderCheckScoreListTotal} from '../../axios/score'

  export default {
    name: 'LeaderCheckScore',
    data(){
      return { 
        pageParam:{ currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有可选的课题列表的总数  
        dialogVisible: false, // 控制审核对话框的 显示/隐藏
        formRules: {
          status: [ { required: true, message: '请选择审核结果', trigger: 'change' } ],
          checkAdvice: [ { required: true, message: '请输入审核意见', trigger: 'blur' } ]
        },
        checkParams:{
          id: 0,
          status: 3,
          checkAdvice: ''
        },
        checkScoreList: [] // 需要审核的成绩列表
      }
    },
    created(){
      this.getCheckScoreList()
      this.getCheckScoreTotal()
    },
    methods: {
      getCheckScoreTotal(){
        getLeaderCheckScoreListTotal().then(res => {
          if(res.success){
            this.total = res.data 
          } 
        })
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCheckScoretList()  
      },
      getCheckScoreList(){
        // 向后端发送请求，获取需要审核的成绩列表
        getLeaderCheckScoreListByPage(this.pageParam).then(res => {
          if(res.success){
            this.checkScoreList = res.data 
          } 
        })

        // 无后端，模拟数据
        // this.checkSubjectList = [
        //   {
        //     stu: {id: 6109118001, name: '张三'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
        //     score: { // 对应毕设课题
        //           id:1,
        //           stuId: 6109118001, 
        //           teaId: 610911, 
        //           status:2,
        //           guideScore: 80, // 指导成绩
        //           commentScore: 85,
        //           replyScore: 90, // 答辩成绩
        //           teacherAdvise: '我是测试评论我是测试评论我是测试评论我是测试评论我是测试评论', // 教师评语
        //         } 
        //   }
        // ]
      },
      // 展示 审核申报课题对话框
      showCheckDialog(score){
        this.checkScore = score  
        this.dialogVisible = true
      },
      submitCheckScore(checkFormRef){
        this.$refs[checkFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 此时发送后端请求，保存审核信息
              this.checkScore.status = this.checkParams.status
              this.checkScore.checkAdvice = this.checkParams.checkAdvice
              checkScoreById(this.checkScore).then(res => {
                if(res.success){
                  this.$message.success('审核提交成功!')
                  this.dialogVisible = false
                  this.getCheckScoreList()
                  this.getCheckScoreTotal()
                } 
              }) 
            }).catch(() => {
              this.$message.info('已取消审核!')
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      }
    }
  }
</script>

<style>

</style>